<template>
  <div>
    <div class="map">
      <ve-map
        :data="chartData"
        :settings="chartSettings"
        :colors="colors"
        :events="chartEvents"
      ></ve-map>
    </div>

    <el-table id="out-table" :data="tableData" border style="width: 150%">
      <el-table-column prop="columnA" label="客户名称"> </el-table-column>
      <el-table-column prop="columnB" label="违规数量"> </el-table-column>
      <el-table-column prop="columnC" label="审计周期"> </el-table-column>
      <el-table-column prop="columnD" label="整改情况"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    sfName: {
      type: String,
      default: 'beijing'
    }
  },

  data() {
    this.colors = ['#EE3131']
    this.chartEvents = {
      click: () => {
        this.tableData = [
          {
            columnA: 'XXX',
            columnB: Math.ceil(Math.random() * 100),
            columnC: '3天',
            columnD: '整改中'
          },
          {
            columnA: 'XXX',
            columnB: Math.ceil(Math.random() * 100),
            columnC: `${Math.ceil(Math.random() * 10)}天`,
            columnD: '整改中'
          },
          {
            columnA: 'XXX',
            columnB: Math.ceil(Math.random() * 100),
            columnC: `${Math.ceil(Math.random() * 10)}天`,
            columnD: '整改中'
          }
        ]
      }
    }
    return {
      chartData: {
        columns: ['name', '风险地区'],
        rows: []
      },
      tableData: []
    }
  },

  computed: {
    chartSettings() {
      return {
        position: `province/${this.sfName}`,
        selectedMode: 'single'
      }
    },
    sfData() {
      let sf = require(`@/utils/sf_data/${this.sfName}.json`)
      return sf.features.map(item => {
        return {
          name: item.properties.name,
          风险地区: Math.ceil(Math.random() * 10000)
        }
      })
    }
  },

  created() {
    this.chartData.rows = this.sfData
  },

  methods: {
    toStr(arr) {
      let str = ''
      arr.forEach(item => {
        str += item[0]
      })
      return str
    }
  }
}
</script>

<style lang="scss" scoped>
.map {
  width: 50%;
  margin: 40px auto;
}
</style>
